<script setup lang="js">
import { ref, reactive } from "vue";

const props = defineProps({
  formInline: {
    type: {
      type: String,
      default: "file"
    },
    id: {
      type: String,
      default: ""
    },
    name: {
      type: String,
      default: ""
    },
    parentId: {
      type: String,
      default: "0"
    },
    width: {
      type: String,
      default: ""
    },
    height: {
      type: String,
      default: ""
    },
    canvasPicUrl: {
      type: String,
      default: ""
    }
  }
});
const ruleFormRef = ref();
const rules = reactive({
  name: [{ required: true, message: "文件名称必填", trigger: "blur" }],
  width: [
    { required: true, message: "请填写宽度", trigger: "blur" },
    {
      message: "宽度必须大于0",
      trigger: "blur",
      validator: (rule, value, callback) => {
        if (value <= 0) {
          callback(new Error("宽度必须大于0"));
        } else {
          callback();
        }
      }
    },
    {
      message: "宽度必须为数字",
      trigger: "blur",
      validator: (rule, value, callback) => {
        if (isNaN(value)) {
          callback(new Error("宽度必须为数字"));
        } else {
          callback();
        }
      }
    }
  ],
  height: [
    { required: true, message: "请填写高度", trigger: "blur" },
    {
      message: "高度必须大于0",
      trigger: "blur",
      validator: (rule, value, callback) => {
        if (value <= 0) {
          callback(new Error("高度必须大于0"));
        } else {
          callback();
        }
      }
    },
    {
      message: "高度必须为数字",
      trigger: "blur",
      validator: (rule, value, callback) => {
        if (isNaN(value)) {
          callback(new Error("高度必须为数字"));
        } else {
          callback();
        }
      }
    }
  ]
});
const newFormInline = ref(props.formInline);
function getRef() {
  return ruleFormRef.value;
}
defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="rules"
    label-width="82px"
  >
    <el-form-item label="文件名称" prop="name">
      <el-input v-model="newFormInline.name" placeholder="请输入文件名称" />
    </el-form-item>
    <el-form-item label="宽度" prop="width">
      <el-input v-model="newFormInline.width" placeholder="请输入宽度">
        <template #append>mm</template>
      </el-input>
    </el-form-item>
    <el-form-item label="高度" prop="height">
      <el-input v-model="newFormInline.height" placeholder="请输入高度">
        <template #append>mm</template>
      </el-input>
    </el-form-item>
  </el-form>
</template>
